<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单界面</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .form-container {
            background-color: #fff;
            padding: 40px;
            width: 50%;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            border-radius: 5px;
        }
        .form-title {
            font-size: 24px;
            text-align: center;
            margin-bottom: 30px;
        }
        .form-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .form-row label {
            flex-basis: 20%;
            text-align: right;
            padding-right: 10px;
            line-height: 32px;
        }
        .form-row input[type="text"], .form-row textarea {
            flex-basis: 70%;
            padding: 5px;
            font-size: 16px;
        }
        textarea {
            height: 100px;
        }
        .button-container {
            text-align: center;
            margin-top: 20px;
        }
        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .back-link {
            display: inline-block;
            margin-bottom: 20px;
            color: #183a8a;
            text-decoration: none;
        }
        .back-link:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
<div class="form-container">
    <a href="${pageContext.request.contextPath}/VehiclesServlet?action=all" class="back-link">← 返回车辆列表</a>


    <div class="form-title">新增</div>
    <%-- 修改表单的action和字段名 --%>
    <form action="VehiclesServlet" method="get">
        <input type="hidden" name="action" value="add_Car">

        <div class="form-row">
            <label for="vehicleId">车辆ID</label>
            <input type="text" id="vehicleId" name="vehicleId" required pattern="\d+">
            <label for="licensePlate">车牌号</label>
            <input type="text" id="licensePlate" name="licensePlate" required>
        </div>

        <div class="form-row">
            <label for="brandModel">品牌型号</label>
            <input type="text" id="brandModel" name="brandModel" required>
            <label for="color">颜色</label>
            <input type="text" id="color" name="color" required>
        </div>


        <div class="form-row">
            <label for="number">核定座位</label>
            <input type="text" id="number" name="number" required pattern="[1-9][0-9]?">
        </div>

        <div class="form-row">
            <label for="purchaseDate">购买日期</label>
            <input type="date" id="purchaseDate" name="purchaseDate" required>
            <label for="remark">备注</label>
            <textarea id="remark" name="remark" maxlength="200"></textarea>
        </div>
        <div class="button-container">
            <button type="submit" class="submit-btn">提交信息</button>
        </div>
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('carForm');
        const inputs = form.querySelectorAll('input, textarea');

        // 为每个输入框添加点击事件，显示提示
        inputs.forEach(input => {
            // 点击时显示title作为提示
            input.addEventListener('focus', function() {
                if(this.title) {
                    showHint(this, this.title);
                }
            });

            // 失去焦点时隐藏提示
            input.addEventListener('blur', function() {
                hideHint();
            });

            // 为不同输入框添加特定的验证规则
            switch(input.id) {
                case 'title':
                    input.addEventListener('input', function() {
                        this.value = this.value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5]/g, '');
                        if(this.value.length > 10) this.value = this.value.slice(0, 10);
                    });
                    break;
                case 'car':
                case 'author':
                case 'color':
                    input.addEventListener('input', function() {
                        if(this.value.length > 20) this.value = this.value.slice(0, 20);
                    });
                    break;
                case 'car_author':
                    input.addEventListener('input', function() {
                        this.value = this.value.replace(/[^a-zA-Z0-9]/g, '');
                        if(this.value.length > 17) this.value = this.value.slice(0, 17);
                    });
                    break;
                case 'seat':
                    input.addEventListener('input', function() {
                        this.value = this.value.replace(/\D/g, '');
                        if(this.value.length > 2) this.value = this.value.slice(0, 2);
                        if(parseInt(this.value) > 99) this.value = '99';
                    });
                    break;
                case 'tel':
                    input.addEventListener('input', function() {
                        this.value = this.value.replace(/[^0-9+-]/g, '');
                        if(this.value.length > 15) this.value = this.value.slice(0, 15);
                    });
                    break;
                case 'carno':
                    input.addEventListener('input', function() {
                        if(this.value.length > 20) this.value = this.value.slice(0, 20);
                    });
                    break;
                case 'comments':
                    input.addEventListener('input', function() {
                        if(this.value.length > 200) this.value = this.value.slice(0, 200);
                    });
                    break;
            }
        });

        // 表单提交验证
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            let isValid = true;

            // 牌照验证
            const title = document.getElementById('title');
            const titleRegex = /^[\u4e00-\u9fa5][A-Za-z][A-Za-z0-9]{5,7}$/;
            if(!titleRegex.test(title.value.trim())) {
                showHint(title, "牌照格式不正确（例：京A12345）", true);
                isValid = false;
            }

            // 车辆品牌验证
            const car = document.getElementById('car');
            if(car.value.trim().length < 2) {
                showHint(car, "至少需要2个字符", true);
                isValid = false;
            }

            // 车型验证
            const author = document.getElementById('author');
            if(author.value.trim().length < 2) {
                showHint(author, "至少需要2个字符", true);
                isValid = false;
            }

            // 车架号验证
            const carAuthor = document.getElementById('car_author');
            const carAuthorRegex = /^[A-Za-z0-9]{17}$/;
            if(!carAuthorRegex.test(carAuthor.value.trim())) {
                showHint(carAuthor, "车架号必须为17位字母数字组合", true);
                isValid = false;
            }

            // 核定座位验证
            const seat = document.getElementById('seat');
            const seatNum = parseInt(seat.value.trim());
            if(isNaN(seatNum) || seatNum < 1 || seatNum > 99) {
                showHint(seat, "请输入1-99之间的数字", true);
                isValid = false;
            }

            // 车辆颜色验证
            const color = document.getElementById('color');
            if(color.value.trim().length < 2) {
                showHint(color, "至少需要2个字符", true);
                isValid = false;
            }

            // 联系电话验证
            const tel = document.getElementById('tel');
            const telRegex = /^[0-9\-\+]{7,15}$/;
            if(!telRegex.test(tel.value.trim())) {
                showHint(tel, "请输入有效的电话号码（7-15位数字，可包含+-）", true);
                isValid = false;
            }

            // 发动机号验证
            const carno = document.getElementById('carno');
            if(carno.value.trim().length < 5) {
                showHint(carno, "至少需要5个字符", true);
                isValid = false;
            }

            // 备注验证
            const comments = document.getElementById('comments');
            if(comments.value.trim().length > 200) {
                showHint(comments, "备注不能超过200字", true);
                isValid = false;
            }

            if(isValid) {
                alert('表单验证通过，可以提交数据！');
                // 这里可以添加实际的表单提交代码
                // form.submit();
            }
        });

        // 取消按钮
        document.getElementById('cancelBtn').addEventListener('click', function() {
            if(confirm('确定要取消吗？所有输入的内容将丢失。')) {
                form.reset();
            }
        });

        // 显示提示
        function showHint(element, message, isError = false) {
            let hint = document.querySelector('.hint');
            if(!hint) {
                hint = document.createElement('div');
                hint.className = 'hint';
                document.body.appendChild(hint);
            }

            hint.textContent = message;
            hint.style.color = isError ? 'red' : '#333';

            const rect = element.getBoundingClientRect();
            hint.style.left = rect.left + 'px';
            hint.style.top = (rect.bottom + window.scrollY) + 'px';
            hint.style.display = 'block';

            // 如果是错误提示，5秒后自动消失
            if(isError) {
                setTimeout(hideHint, 5000);
            }
        }

        // 隐藏提示
        function hideHint() {
            const hint = document.querySelector('.hint');
            if(hint) {
                hint.style.display = 'none';
            }
        }
    });

    // 检查URL中是否有 success=true 参数
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('success') === 'true') {
        alert("添加成功！");
        // 可选：清除URL中的参数，避免刷新时重复弹窗
        history.replaceState({}, document.title, window.location.pathname);
    }else     if (urlParams.get('success') === 'error') {
        alert("添加失败！！！请检查数据或联系管理员");
        // 可选：清除URL中的参数，避免刷新时重复弹窗
        history.replaceState({}, document.title, window.location.pathname);
    }
</script>
</body>
</html>